<template>
	<view class="pages" :class="isMove?'banMove':''">
		<!-- 收货地址 -->
		<view class="addressContent">
			<view class="addressLeft">
				<!-- <image src="../../static/shopping/address.png" class="addressImg"></image> -->
				<!-- 地址信息 -->
				<view class="addressInfo">
					<view v-if="addresssInfo.length != 0">
						<view class="phone"><span>{{addresssInfo.fullName}}</span>{{addresssInfo.mobile}}</view>
						<view class="address">{{addresssInfo.provinceText}}{{addresssInfo.cityText}}{{addresssInfo.areaText}}{{addresssInfo.address}}</view>
					</view>
					<!-- 如果没有地址 -->
					<view v-else>
						<view class="addAddress">添加地址</view>
						<view class="addressTips">您还没有添加收货地址哦～</view>
					</view>
				</view>
			</view>
			<!-- 右侧箭头 -->
			<image src="../../static/shopping/right.png" class="rightImg" @tap="goAddressList"></image>
		</view>
	  <!-- 订单商品 -->
		<view class="orderGoods">
			<view class="goodsInfo">
				<image :src="orderInfo.goodsImg" class="goodsImg"></image>
				<view class="info">
					<view class="title">{{orderInfo.goodsTitle}}</view>
					<view class="attribute">商品的属性描述～</view>
					<view class="tips">无忧购</view>
				</view>
			</view>
		  <!-- 价钱数量 -->
			<view class="goodsPrice">
				<view class="price" v-if="payType != 1">¥{{orderInfo.goodsPrice}}</view>
				<view class="number">x{{orderInfo.goodsNum}}</view>
			</view>
		</view>
		<!-- 购买数量 -->
		<view class="buyNumber">
			<view>购买数量</view>
			<!-- 加减数量 -->
			<view class="operation">
				<view class="num">{{orderInfo.goodsNum}}</view>
			</view>
		</view>
		<!-- 配送方式 免邮 -->
		<view class="buyNumber" >
			<view>配送方式</view>
			<view>快递 免邮</view>
		</view>
		
		<view class="buyNumber" >
			<view>备注</view>
			<input placeholder="请输入备注" v-model="remark" style="background: #F2F2F2;text-align: right;height: 60rpx;" />
		</view>
		<!-- 支付方式 -->
		<view class="payTitle">支付方式</view>
		<view class="payType">
			<view v-if="payType == 1">
				<view class="type" v-for="(item,index) in walletType" :key="index" @tap="changeWalletType(item)">
					<view class="payState" >
						<view class="payTitles">{{item.title}}</view>
					</view>
					<image :src="walletId == item.id?'../../static/recharge/selectIcon.png':'../../static/recharge/icon.png'" class="radioImg"></image>
				</view>
			</view>
			
			
			<view class="type" v-if="payType == 2">
				<view class="payState">
					<view class="payTitles">购物券</view>
				</view>
			</view>
			
			<view class="type" v-if="payType == 3">
				<view class="payState">
					<view class="payTitles">提货券</view>
				</view>
			</view>
			
		</view>
		
		
		
		<!-- 底部固定栏 -->
		<view class="fotter">
			<view class="total" >
				<span class="payment" v-if="payType == 2 || payType == 3">实付款:</span><span class="price" v-if="payType == 2 || payType == 3">¥{{(orderInfo.goodsPrice * orderInfo.goodsNum).toFixed(2)}}</span>
			</view>
			<!-- 如果有收获地址 -->
			<view class="submit" @tap="submitOrder" v-if="addresssInfo">提交订单</view>
			<!-- 如果没有收货地址 按钮不可点击 -->
			<view class="submitDisable" v-else>提交订单</view>
		</view>
		
		<!-- 购买易货商品输入密码弹窗 -->
		<view class="prop" v-if="isProp">
			<view class="buyProp">
				<image src="../../static/recharge/close.png" class="closeImg" @tap="closeProp"></image>
				<view class="title">确认抢购</view>
			    <view class="numTitle">支付密码</view>
			    <input placeholder="请输入支付密码" class="input-prop" password placeholder-class="placeholder" type="number" v-model="payPassword"/>
				<view class="sures" @tap="sure">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { addressList,buyVoucherGoods,buyGoods,rushToBuy,buyMemberGoods } from '@/api/api.js'
	export default {
			data() {
				return {
					// 地址列表
					addressList:[],
					// 地址信息
					addresssInfo:'',
					// 地址id
					addressId:'',
					// 控制屏幕滑动
					isMove:false,
					payType:1,  // 付款方式 1 多多券/欢乐豆 2 购物券 3 提货券
					walletId:1,
					walletType:[
						{id:1,title:'多多券'},
						{id:2,title:'快乐豆'},
						{id:3,title:'多多券+快乐豆'},
					],
					isProp:false,
					payPassword:'',
					isVip:0,         // 是否是会员礼包商品 1 是 0 不是
					remark:''
				}
			},
			onLoad(e) {
				this.orderInfo = e.orderInfo.replace(/""/g, "");
				this.orderInfo = JSON.parse(this.orderInfo)
				this.payType = e.payType
				this.isVip = e.isVip
			},
			onShow() {
				// 获取地址列表
				this.getAddressList()
			},
			methods:{
				// 获取地址列表
				getAddressList() {
					let data = {}
					addressList(data).then( res=> {
						this.addressList = res.data
						// 如果没有添加地址,提示去添加
						if ( this.addressList.length == 0 ) {
							this.addresssInfo = ''
						}else if( this.addressList.length == 1 ) {
							// 如果只有一个地址,直接显示为默认
							this.addresssInfo = this.addressList[0]
							this.addressId = this.addressList[0].id
						}else if( this.addressList.length > 1 ){
							// 如果存在多个地址,先判断是否有默认地址
							let isHaveDefault = this.addressList.some( item => item.isDefault == 1)
							// 如果有,查询默认地址
							if( isHaveDefault ) {
								this.addressList.forEach( item => {
									if( item.isDefault == 1 ) {
										this.addresssInfo = item
										this.addressId = item.id
									}
								})
							}else {
								// 如果没有,默认第一条地址
								this.addresssInfo = this.addressList[0]
								this.addressId = this.addressList[0].id
							}
						}
					})
				},
				
				// 前往地址列表
				goAddressList() {
					uni.navigateTo({
						url:'./addressList?isSubmit=1'
					})
				},
				
				changeWalletType(item) {
					this.walletId = item.id
				},
				// 提交订单
				submitOrder() {
					// 如果没有收货地址,兑换用户去添加收货地址
					if( !this.addresssInfo ) {
						this.isShowAddressPop = true
						this.isMove = true
						return false
					}
					// 如果是会员礼包商品
					if( this.isVip == 1 ) {
						
						this.isProp = true
						return
					}
					
					// 多多券支付(抢拍商品)
					if( this.payType == 1 ) {
						this.isProp = true
						
						// 购物券,提货券支付(商城商品)
					}else {
						uni.showLoading({
							title: ''
						});
						let data = {
							goodsId:this.orderInfo.goodsId,
							quantity:this.orderInfo.goodsNum,
							addressId:this.addressId,
							remark:this.remark,
						}
						buyVoucherGoods(data).then( res=> {
							if( res.code == 200 ) {
								uni.hideLoading()
								uni.showToast({
									title:'购买成功，请在我的订单中查看',
									icon:'none'
								})
								setTimeout(function() {
									uni.switchTab({
										url:'/pages/goods/goods'
									})
								},500)
							}
						})
					}
				},
				
				closeProp() {
					this.isProp = false
					this.payPassword = ''
				},
				
				sure() {
					if( this.isVip == 1 ) {
						uni.showLoading({
							title: ''
						});
						let data = {
							goodsId:this.orderInfo.goodsId,
							quantity:this.orderInfo.goodsNum,
							addressId:this.addressId,
							payPassword:this.payPassword
						}
						buyMemberGoods(data).then( res=> {
							if( res.code == 200 ) {
								uni.hideLoading()
								uni.showToast({
									title:'购买成功，请在我的订单中查看',
									icon:'none'
								})
								setTimeout(function() {
									uni.switchTab({
										url:'/pages/index/index'
									})
								},500)
							}
						})
					}else{
						uni.showLoading({
							title: ''
						});
						let data = {
							goodsId:this.orderInfo.goodsId,
							quantity:this.orderInfo.goodsNum,
							addressId:this.addressId,
							walletType:this.walletId,
							payPassword:this.payPassword,
						}
						rushToBuy(data).then( res=> {
							if( res.code == 200 ) {
								uni.hideLoading()
								uni.showToast({
									title:'购买成功，请在我的订单中查看',
									icon:'none'
								})
								this.isProp = false
								setTimeout(function() {
									uni.switchTab({
										url:'/pages/index/index'
									})
								},500)
							}
							
						})
					}
					
				},
				// 关闭暂无地址弹窗
				closeAddressClose() {
					this.isShowAddressPop = false
					this.isMove = false
				},
				// 前往充值页面
				goRecharge() {
					uni.navigateTo({
						url:'../../userData/recharge/recharge'
					})
				},
				// 关闭多多券不足弹窗
				closeBalancePop() {
					this.isShowbalancePop = false
					this.isMove = false
				},
			}
	}
</script>

<style lang="less">
	.banMove {
		position:fixed;
		bottom:0;
		height: 100%;
	}
	.pages {
		letter-spacing: 1rpx;
		// 收货地址
		.addressContent {
			border-bottom: #FAFAFA 10rpx solid;
			padding: 40rpx 40rpx 40rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 680rpx;
			background: #FFFFFF;
			box-shadow: inset 0px 4px 8px 0rpx rgba(0, 0, 0, 0.05);
			.addressLeft {
				display: flex;
				align-items: center;
				.addressImg {
					width: 40rpx;
					height: 40rpx;
				}
				// 地址信息
				.addressInfo {
					margin-left: 21rpx;
					.phone {
						font-size: 28rpx;
						font-family: PingFangSC-Bold, PingFang SC;
						font-weight: bold;
						color: #1A1A1A;
						span {
							margin-right: 24rpx;
						}
					}
					.address {
						margin-top: 10rpx;
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #1A1A1A;
					}
					.addAddress {
						font-size: 28rpx;
						font-family: PingFangSC-Bold, PingFang SC;
						font-weight: bold;
						color: #D71F36;
					}
					.addressTips {
						margin-top: 10rpx;
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #1A1A1A;
					}
					.postage {
						margin-top: 12rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #D71F36;
					}
				}
			}
			// 右侧箭头
			.rightImg {
				width: 20rpx;
				height: 36rpx;
			}
		}
		// 订单商品
		.orderGoods {
			margin: 40rpx 0 53rpx 0;
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;
			.goodsInfo {
				display: flex;
				align-items: center;
				.goodsImg {
					width: 150rpx;
					height: 150rpx;
					border-radius: 8rpx;
				}
				.info {
					margin-left: 25rpx;
					.title {
						width: 350rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						font-size: 28rpx;
						font-family: PingFangSC-Bold, PingFang SC;
						font-weight: bold;
						color: #1A1A1A;
					}
					.attribute {
						margin-top: 5rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #808080;
					}
					.tips {
						margin-top: 19rpx;
						width: 112rpx;
						height: 44rpx;
						border-radius: 24rpx;
						opacity: 0.5;
						border: 2rpx solid #FE3B33;
						text-align: center;
						line-height: 44rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #FE3B33;
					}
				}
			}
			// 价钱数量
			.goodsPrice {
				text-align: right;
				.price {
					font-size: 28rpx;
					font-family: PingFangSC-Bold, PingFang SC;
					font-weight: bold;
					color: #1A1A1A;
				}
				.number {
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #808080;
				}
			}
		}
		// 购买数量
		.buyNumber {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #1A1A1A;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 40rpx;
			padding: 0 30rpx;
			.operation {
				display: flex;
				align-items: center;
				.num {
					margin: 0 19rpx;
					width: 80rpx;
					height: 40rpx;
					background: #F2F2F2;
					text-align: center;
					line-height: 40rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Bold, PingFang SC;
					font-weight: bold;
					color: #1A1A1A;
				}
				.operationIcons {
					width: 22rpx;
					height: 4rpx;
				}
				.operationIcon {
					width: 22rpx;
					height: 22rpx;
				}
			}
		}
		
		// 支付方式
		.payTitle {
			margin:0 0 40rpx 30rpx;
			font-size: 30rpx;
			font-family: PingFangSC-Bold, PingFang SC;
			font-weight: bold;
			color: #1A1A1A;
		}
		.payType {
			margin-bottom: 120rpx;
			padding: 0 40rpx;
			.type {
				margin-bottom: 50rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.payState {
					display: flex;
					align-items: center;
					.payImg {
						width: 56rpx;
						height: 56rpx;
					}
					.payTitles {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #1A1A1A;
					}
				}
				.radioImg {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
		// 底部固定栏
		.fotter {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx 0 40rpx;
			position: fixed;
			bottom: 0;
			width: 680rpx;
			height: 120rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -2rpx 8rpx 0rpx rgba(0, 0, 0, 0.08);
			.total {
				display: flex;
				align-items: flex-end;
				font-size: 26rpx;
				font-family: PingFangSC-Bold, PingFang SC;
				font-weight: bold;
				color: #1A1A1A;
				.payment {
					margin-right: 25rpx;
				}
				.price {
					margin-bottom: -8rpx;
					font-size: 48rpx;
					font-family: PingFang SC Bold;
					font-weight: bold;
				}
			}
			.submitDisable {
				text-align: center;
				line-height: 86rpx;
				width: 240rpx;
				height: 86rpx;
				background: #FE3B33;
				border-radius: 60rpx;
				opacity: 0.3;
				font-size: 32rpx;
				font-family: PingFangSC-Bold, PingFang SC;
				font-weight: bold;
				color: rgba(255, 255, 255, 0.6);
			}
			.submit {
				text-align: center;
				line-height: 86rpx;
				width: 240rpx;
				height: 86rpx;
				background: #FE3B33;
				border-radius: 60rpx;
				font-size: 32rpx;
				font-family: PingFangSC-Bold, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}
		}
		.prop {
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			background: rgba(26, 26, 26, 0.45);
			.buyProp {
				padding-bottom: 40rpx;
				position: relative;
				display: flex;
				align-items: center;
				flex-direction: column;
				width: 560rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				.closeImg {
					width: 24rpx;
					height: 24rpx;
					position: absolute;
					top: 37rpx;
					right: 25rpx;
				}
				
				.title {
					margin-top: 38rpx;
					font-size: 30rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #1A1A1A;
					line-height: 42rpx;
				}
				.numTitle {
					margin-top: 46rpx;
					width: 470rpx;
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
					line-height: 37rpx;
				}
				.input-prop {
					margin-top: 12rpx;
					height: 88rpx;
					width: 470rpx;
					border-bottom:1rpx solid #F2F2F2 ;
				}
				.placeholder {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #808080;
					line-height: 33rpx;
				}
				.sures {
					margin-top: 60rpx;
					text-align: center;
					line-height: 86rpx;
					width: 470rpx;
					height: 86rpx;
					background: #FE3B33;
					border-radius: 4rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
				.codes {
					position: absolute;
					right: 43rpx;
					bottom: 210rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FE3B33;
					line-height: 33rpx;
				}
			}
		}
	}
</style>
